<template>
    <div class="page-form page-act-add">
      <Form  ref="formValidate" :model="formItem" :rules="ruleValidate" style="width: 500px" :label-width="120">
          <FormItem prop="title" label="名称：">
              <Input v-model="formItem.title" placeholder="请输入节目标题"></Input>
          </FormItem>
          <FormItem prop="desc" label="描述：">
              <Input v-model="formItem.desc" placeholder="请输入节目描述"></Input>
          </FormItem>
          <FormItem prop="type" label="类型：">
              <Input v-model="formItem.type" placeholder="请输入节目类型"></Input>
          </FormItem>
          <FormItem prop="member" label="表演者：">
              <Input v-model="formItem.member" placeholder="请输入节目成员"></Input>
          </FormItem>
          <FormItem>
              <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
              <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
          </FormItem>
      </Form>
    </div>
</template>
<style scoped lang="less">
.page-form {
  overflow: auto;
  box-sizing: border-box;
  padding: 15px 0 0 0;
}
</style>
<script>
export default {
  data() {
    return {
      id: "",
      formItem: {
        title: "",
        desc: "",
        type: "",
        member: ""
      },
      ruleValidate: {
        title: [
          {
            required: true,
            message: "界面名称不能为空哦~",
            trigger: "blur"
          }
        ],
        desc: [
          {
            required: true,
            message: "描述下您的界面吧~",
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "您还没有输入界面类型哦~",
            trigger: "blur"
          }
        ],
        member: [
          {
            required: true,
            message: "请添加表演节目的成员",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    var self = this;
    var id = this.$route.query.id;
    if (id != undefined) {
      self.id = id;
      this.init(id);
    }
  },
  mounted() {},
  methods: {
    init(id) {
      var self = this;
      // 定义请求
      var req = self.Axios.get(self.Interface.actDetails + id);

      // 处理请求结果
      req.then(res => {
        var data = res.data;
        if (data.success) {
          self.formItem = {
            title: data.data.title,
            desc: data.data.desc,
            type: data.data.type,
            member: data.data.member
          };
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    handleSubmit(name) {
      var self = this;
      this.$refs[name].validate(valid => {
        if (valid) {
          var data = {
            title: self.formItem.title,
            desc: self.formItem.desc,
            type: self.formItem.type,
            member: self.formItem.member
          };
          if (self.id) {
            data.id = self.id;
          }
          // 定义请求
          var req = self.Axios.post(self.Interface.actSave, data);

          // 处理请求结果
          req.then(res => {
            var data = res.data;
            if (data.success) {
              if (self.id) {
                this.$Message.success("更新成功");
              } else {
                this.$Message.success("添加成功");
              }                      
              setTimeout(function() {
                self.$router.push({
                  path: "/act/list"
                });
              }, 1500);
            } else {
              this.$Message.error(data.msg);
            }
          });
        } else {
          this.$Message.error("请完善您的签到信息");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>
